<template>
  <div>
    <!-- vxe-工具栏 -->
    <vxe-toolbar
      custom
    >
      <template v-slot:buttons>
        <!-- 新增button -->
        <el-button size="mini" type="diyfirst" @click="handleCreate">新增一级机构</el-button>

        <!-- <el-button @click="insertEvent">新增</el-button> -->
        <!-- <el-button @click="saveEvent">保存</el-button> -->
        <!-- <el-button @click="vaildEvent">校验</el-button> -->
      </template>
    </vxe-toolbar>
    <vxe-table
      ref="xTree"
      :data="tableData"
      :export-config="{}"
      :keyboard-config="{isArrow: true, isEnter: true}"
      :loading="loading"
      :row-key="true"
      :show-header="true"
      :tree-config="{
            lazy: true,
            children: 'children',
            accordion: true,
            line: true,
            iconOpen: 'fa fa-minus-circle',
            iconClose: 'fa fa-plus-circle'
            }"
      align="center"
      border="outer"
      class="mytable-scrollbar"
      height="460"
      highlight-hover-row
      keep-source
      resizable
      row-id="id"
      show-overflow
      size="mini"
    >

      <!-- 复选框 -->
      <!-- <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column> -->
      <!-- 操作 -->
      <vxe-table-column
        :title="handleS"
        fixed="left"
        show-overflow
        width="200"
      >
        <template v-slot="{ row }">
          <!-- 根据传参是否显示删除  -->
          <el-button size="mini" type="text" @click="handleUpdate(row)">
            <!-- 修改 -->
            {{ $t('base.modify') }}
          </el-button>
          &nbsp;
          <!-- 根据传参是否显示删除  -->
          <el-popconfirm
            :cancel-button-text="$t('base.cancel')"
            :confirm-button-text="$t('base.affirm')"
            :title="$t('message.msg2')"
            icon="el-icon-info"
            icon-color="red"
            @confirm="removeEvent(row)"
          >
            <el-button slot="reference" size="mini" type="text">{{ $t('base.del') }}</el-button>
          </el-popconfirm>
          &nbsp;
          <el-button v-if="true" size="mini" type="text" @click="handleAddSonNodeEvent(row)">
            新增子机构
          </el-button>

        
        </template>


      </vxe-table-column>




      <!-- 动态字段内容编辑 -->
      <vxe-table-column v-for="(config, index) in tableColumn" :key="index" v-bind="config"></vxe-table-column>

    </vxe-table>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import PageHeaderLayout from '@/layouts/PageHeaderLayout'
// import ApeDrawer from '@/components/ApeDrawer'
// import { mapGetters } from 'vuex'

export default {
  name: 'ExTreeTable',
  components: {
    //PageHeaderLayout,
  },
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    tableColumn: {
      type: Array,
      default() {
        return []
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  // 定义属性
  data() {
    return {
   
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    handleS() {
      return this.$t('base.handleS');
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {


    /* 表格工具栏相关方法 */
    // 新增弹窗按钮
    handleCreate() {
      this.$emit('handleCreateEmit', 'create')
     
    },
    /* 表格相关方法 */
    // 表格行内删除
    removeEvent(row) {
      this.$emit('handleRmoveColEmit', row)
     
    },
    // 修改弹窗按钮
    handleUpdate(row) {
      console.log('handleUpdateEmit', row);
      this.$emit('handleUpdateEmit', row, 'update')
     
    },
    // 添加子节点
    handleAddSonNodeEvent(row) {
      console.log('handleAddSonNodeEventEmit', row);
      this.$emit('handleAddSonNodeEventEmit', row, 'addSonNode')
    }
  },  //methods-end
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  beforeCreate() {
  }, // 生命周期 - 创建之前
  beforeMount() {
  }, // 生命周期 - 挂载之前
  beforeUpdate() {
  }, // 生命周期 - 更新之前
  updated() {
  }, // 生命周期 - 更新之后
  beforeDestroy() {
  }, // 生命周期 - 销毁之前
  destroyed() {
  }, // 生命周期 - 销毁完成
  activated() {
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
  background-color: #FFFFFF;
}

/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
  background-color: #bfbfbf;
  border-radius: 5px;
  border: 1px solid #F1F1F1;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
  background-color: #A8A8A8;
}

.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
  background-color: #787878;
}

/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
  background-color: #FFFFFF;
}
</style>